<template>
    <section>
        <el-tabs type="border-card" v-model="tab">
            <el-form inline>
                <template v-if="tab == 'factory'">
                    <el-form-item>
                        <el-select v-model="form.factory_name" filterable remote placeholder="输入搜索的工厂名称" size="small"
                                   :remote-method="searchFactoryBtn" :loading="searchLoading" clearable>
                            <el-option v-for="(item,index) in factoryList" :label="item.factory_name" :value="item.factory_name" :key="index">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="form.qc_date" type="daterange" unlink-panels range-separator="至" size="small" value-format="yyyy-MM-dd"
                                        :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </template>
                <template v-else>
                    <el-form-item>
                        <el-input size="small" v-model.trim="processingForm.processing_code" placeholder="加工单号" style="width: 180px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="small" v-model.trim="processingForm.type_no" placeholder="款号" style="width: 150px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker v-model="processingForm.qc_date" type="daterange" unlink-panels range-separator="至" size="small" value-format="yyyy-MM-dd"
                                        :clearable="false" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                        </el-date-picker>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                </el-form-item>
            </el-form>
            <el-tab-pane label="加工厂" name="factory" :disabled="loading">
                <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                    <el-table-column prop="factory_name" label="工厂名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="total_num" label="总数"></el-table-column>
                    <el-table-column prop="pass_num" label="合格数"></el-table-column>
                    <el-table-column prop="un_pass_num" label="不合格数"></el-table-column>
                    <el-table-column prop="rate" label="合格率">
                        <template slot-scope="{row}">
                            <el-tag v-if="row.rate>=90" size="mini" type="success">{{row.rate}}%</el-tag>
                            <el-tag v-else-if="row.rate>=80" size="mini" type="warning">{{row.rate}}%</el-tag>
                            <el-tag v-else size="mini" type="danger">{{row.rate}}%</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <!--翻页栏-->
                <div style="margin-top: 4px;overflow: hidden;float: right;">
                    <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
                </div>
            </el-tab-pane>
            <el-tab-pane label="加工单" name="processing_code" :disabled="loading">
                <el-table :data="processingData" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                    <el-table-column prop="processing_code" label="加工单"></el-table-column>
                    <el-table-column prop="type_no" label="款号"></el-table-column>
                    <el-table-column prop="factory_name" label="工厂名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="total_num" label="总数"></el-table-column>
                    <el-table-column prop="pass_num" label="合格数"></el-table-column>
                    <el-table-column prop="un_pass_num" label="不合格数"></el-table-column>
                    <el-table-column prop="rate" label="合格率">
                        <template slot-scope="{row}">
                            <el-tag v-if="row.rate>=90" size="mini" type="success">{{row.rate}}%</el-tag>
                            <el-tag v-else-if="row.rate>=80" size="mini" type="warning">{{row.rate}}%</el-tag>
                            <el-tag v-else size="mini" type="danger">{{row.rate}}%</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
                <!--翻页栏-->
                <div style="margin-top: 4px;overflow: hidden;float: right;">
                    <Page :total="processingTotal" :current="processingPage" :page-size="limit" show-total @on-change="pageChange"></Page>
                </div>
            </el-tab-pane>
        </el-tabs>
    </section>
</template>

<script>

import {formatDate} from "@/libs/tools";
import {wcheckPassList} from "@/api/produce/wc";
import {factoryList} from "@/api/produce/factory";

export default {
    name: "produce_wc_pass",
    data() {
        return {
            tableHeight: window.innerHeight - 284,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            factoryList: [],
            searchLoading: false,

            processingData: [],
            processingPage: 1,
            processingTotal: 0,
            tab: "factory",
            form: {
                factory_name: "",
                qc_date: [formatDate(new Date().getTime(), "date"), formatDate(new Date().getTime(), "date")]
            },
            processingForm: {
                processing_code: "",
                type_no: "",
                qc_date: [formatDate(new Date().getTime(), "date"), formatDate(new Date().getTime(), "date")]
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: '昨天',
                        onClick(picker) {
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, start]);
                        }
                    },{
                        text: '今天',
                        onClick(picker) {
                            const start = new Date();
                            picker.$emit('pick', [start, start]);
                        }
                    },{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '当月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'month_first_day')));
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '上月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'last_month_first_day')));
                            end.setTime(new Date(formatDate(new Date().getTime(), 'last_month_last_day')))
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '今年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'year')+"-01-01"));
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '去年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(new Date(formatDate(new Date().getTime(), 'last_year')+"-01-01"));
                            end.setTime(new Date(formatDate(new Date().getTime(), 'last_year')+"-12-31"));
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索加工厂
        searchFactoryBtn(val){
            if(val == ""){
                return;
            }
            this.getFactoryData(val);
        },
        getFactoryData(name){
            factoryList({page: 1, limit: 100, tab: 1, factory_name: name, status: 0}).then((res) =>{
                this.factoryList = res.data.data;
            })
        },
        //搜索按钮
        searchBtn() {
            if(this.tab == 'factory'){
                this.page = 1;
            }else{
                this.processingPage = 1;
            }
            this.getData();
        },
        //翻页
        pageChange(page) {
            if(this.tab == 'factory'){
                this.page = page;
            }else{
                this.processingPage = page;
            }
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.tab == 'factory' ? this.page : this.processingPage,
                limit: this.limit,
                tab: this.tab
            };
            param = Object.assign(param, this.tab == 'factory' ? this.form : this.processingForm);
            this.loading = true;
            wcheckPassList(param).then((res) => {
                this.loading = false;
                if(this.tab == 'factory'){
                    this.total = res.data.total;
                    this.data = res.data.data;
                }else{
                    this.processingTotal = res.data.total;
                    this.processingData = res.data.data;
                }
            }).catch(() => {
                this.loading = false;
            });
        },
    },
    mounted() {
        this.getFactoryData("");
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
